<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <my-bread>粉丝管理</my-bread>
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
        <el-tab-pane label="粉丝列表" name="list">
          <!-- 列表渲染 -->
          <ul class="imageList">
            <li v-for="item in fanlist" :key="item.id">
              <el-avatar :size="80" :src="item.photo">
                <img
                  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                />
              </el-avatar>
              <p>{{ item.name }}</p>
              <el-button size="small" type="primary" plain> +关注</el-button>
            </li>
          </ul>
          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            style="margin-top: 20px"
            :page-size="reqParams.per_page"
            :current-page="reqParams.ppage"
            :total="total"
            @current-change="changePage"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="粉丝图像" name="pic">
          <div ref="wrapper" style="width: 600px; height: 400px"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'
export default {
  name: 'fans',
  data () {
    return {
      reqParams: {
        page: 1,
        per_page: 24
      },
      // imgUrl:'@/assets/image/avatar.jpg',
      // require('@/assets/image/avatar.jpg')
      activeName: 'list',
      total: null,
      fanlist: []
    }
  },
  created () {
    // console.log(echarts);
    this.getFanList()
  },
  methods: {
    async initChart () {
      const myChart = echarts.init(this.$refs.wrapper)
      const option = {
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar'
          }
        ]
      }
      // xAxis.data
      // series[0].data
      // const {
      //   data: { data },
      // } = await this.$http.get("/mp/v1_0/statistics/followers");
      // console.log(data);
      const data = [
        { name: '20岁以下', count: 100 },
        { name: '20-30岁', count: 300 },
        { name: '30-40岁', count: 400 },
        { name: '40-50岁', count: 200 },
        { name: '50岁以上', count: 100 }
      ]
      data.forEach(item => {
        option.xAxis.data.push(item.name)
        option.series[0].data.push(item.count)
      })
      myChart.setOption(option)
    },
    tabClick () {
      if (this.activeName === 'pic') {
        // console.log('click');
        this.initChart()
      }
    },
    async getFanList () {
      if (this.activeName === 'list') {
        const {
          data: { data }
        } = await this.$http.get('/mp/v1_0/followers', {
          params: this.reqParams
        })
        this.fanlist = data.results
        this.total = data.total_count
      }
    },
    changePage (changePage) {
      this.reqParams.page = changePage
      this.getFanList()
    }
  }
}
</script>

<style scoped lang="less">
.imageList {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 120px;
    height: 180px;
    border: 1px dashed #dddddd;
    padding-top: 10px;
    margin-right: 20px;
    margin-top: 20px;
    text-align: center;
    p {
      margin: 10px;
    }
  }
}
</style>
